#{extends 'main.html' /}
#{set title:messages.get('patients') /}

<style>
.surveyAnswerBtn {
	height: 24px;
	width: 120px;
	font-size: 12px;
	font-family: 'Helvetica', 'Arial', 'Sans';
	margin: 0px !important;
}

.surveyAnswerBtn span {
	height: 24px;
	margin: 0px;
	padding: 0px !important;
	margin-top: 4px;
}

.patientsSwitcher {
	float: right;
	margin: 0px !important;
}
</style>

<script>
$(function() {
	$(".patientsSwitcher").each(function() {
		$(this).buttonset();
	});
});
</script>

<div id="patientsTitleContainer">
	<h2 class="listTitle" id="patientsListTitle">&{'patients'}</h2>
	<div class="patientsSwitcher">
        <input class="radio-button" 
        	   type="radio" 
        	   id="userOnly" 
        	   name="switcher" 
        	   value="USERS" 
        	   #{if type == 'USERS'} checked #{/if}
        	   onchange="document.location.href='@{PatientView.updatePatientsTable('USERS')}'"/>
        <label for="userOnly" class="surveyAnswerBtn">&{'patient.userOnly'}</label>
        <input class="radio-button" 
        	   type="radio" 
        	   id="all" 
        	   name="switcher" 
        	   value="ALL" 
        	   #{if type == 'ALL'} checked #{/if}
        	   onchange="document.location.href='@{PatientView.updatePatientsTable('ALL')}'"/>
        <label for="all" class="surveyAnswerBtn">&{'patient.all'}</label>
	</div>
</div>
	#{if flash.success}
		<div class="crudFlash flashSuccess">
			${flash.success}
		</div>
	#{/if} 
	#{if flash.error || error}
		<div class="crudFlash flashError">
			${error ?: flash.error}
		</div>
	#{/if}
<div id="patientAddLink">
  	<a href="@{add()}">&{'patient.add'}</a>
</div>
#{if userPatients.isEmpty()}
	&{'patient.list.isEmpty'}
#{/if}
#{else}
	#{patientsTable userPatients: userPatients /}
#{/else}
